<template>
  <f7-page>
    <f7-navbar title="卡片" back-link></f7-navbar>

    <div class="tien-bar bg-white solid-bottom">
      <div class="action">
        <span class="tien-icon-title text-orange"></span> 基本用法
      </div>
      <div class="action">
        <button class="tien-btn bg-green shadow" bindtap="basicsSteps">下一步</button>
      </div>
    </div>
    <div class="bg-white padding">
      <div class="tien-steps">
        <div v-for="(item,index) in basicsList" class="tien-item" :class="index>1?'':'text-red' ">
          <span :class="'tien-icon-'+item.icon"></span>
          {{item.name}}
        </div>
      </div>
    </div>

    <div class="bg-white padding margin-top-xs">
      <div class="tien-steps">
        <div
          v-for="(item,index) in basicsList"
          class="tien-item"
          :class="index>1?'':'text-orange' "
        >
          <span :class="'tien-icon-'+ (index>1?'title':item.icon)"></span>
          {{item.name}}
        </div>
      </div>
    </div>

    <div class="bg-white padding margin-top-xs">
      <div class="tien-steps steps-arrow">
        <div v-for="(item,index) in basicsList" class="tien-item" :class="index>1?'':'text-blue' ">
          <span :class="'tien-icon-'+item.icon"></span>
          {{item.name}}
        </div>
      </div>
    </div>
    <div class="tien-bar bg-white solid-bottom margin-top">
      <div class="action">
        <span class="tien-icon-title text-orange"></span> 数字完成
      </div>
      <div class="action">
        <button class="tien-btn bg-green shadow" bindtap="numSteps">下一步</button>
      </div>
    </div>
    <div class="bg-white padding">
      <div class="tien-steps">
        <div v-for="(item,index) in numList" :class=" index>1?'':'text-blue' " class="tien-item">
          <span :class=" 'num '+ (index==2?'err':'') " :data-index="index"></span>
          {{item.name}}
        </div>
      </div>
    </div>
    <div class="tien-bar bg-white solid-bottom margin-top">
      <div class="action">
        <span class="tien-icon-title text-orange"></span> 多级显示
      </div>
      <div class="action">
        <button class="tien-btn bg-green shadow" bindtap="scrollSteps">下一步</button>
      </div>
    </div>
  </f7-page>
</template>

<script>
import '../../css/colorui/steps.css';
export default {
  name: "setps",
  data() {
    return {
      basicsList: [
        {
          icon: "usefullfill",
          name: "开始"
        },
        {
          icon: "radioboxfill",
          name: "等待"
        },
        {
          icon: "roundclosefill",
          name: "错误"
        },
        {
          icon: "roundcheckfill",
          name: "完成"
        }
      ],
      basics: 0,
      numList: [
        {
          name: "开始"
        },
        {
          name: "等待"
        },
        {
          name: "错误"
        },
        {
          name: "完成"
        }
      ],
      num: 0,
      scroll: 0
    };
  },
  mounted() {},
  methods: {}
};
</script>

